<template>
  <div>
    <div class="content">
      <div class="ivu-clearfix">
        <!--      <Select filterable v-model="condition.car_type_code" clearable placeholder="请选择类型" @on-change="getData">-->
        <!--        <Option v-for="item in statusList" :value="item.car_type_code" :key="item.car_type_code">{{ item.car_type_name }}</Option>-->
        <!--      </Select>-->
        <Input class="mb10" search v-model="condition.keyword" placeholder="请输入设备编码" @on-search="getData"/>
        <!--        {{info}}-->
        <Button class="ml10 fr"  @click="getEdit('',true)">
          <Icon type="md-add"/>
          新增IMEI
        </Button>
        <!--        <Button class="ml10 fr" type="error" @click="delAll">删除</Button>-->
      </div>
      <Table :loading="loading" @on-selection-change="selectList" border class="mt20" ref="selection"
             :columns="columns2" :data="data1">

        <template slot-scope="{ row, index }" slot="index">
          <span>{{ (condition.start - 1) * condition.limit + (index + 1) }}</span>
        </template>
        <template slot-scope="{ row, index }" slot="status">
          <Tag color="#f09614" v-if="row.status == 0"> 未绑定</Tag>
          <Tag color="#008aff" v-else> 已绑定</Tag>
        </template>
        <template slot-scope="{row}" slot="imsi">
          <span>{{ row.imsi || '-' }}</span>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <span class="cursor cr2d8cf0" @click="getDel(row,1)">删除</span>
        </template>
      </Table>
      <div class="disflex mt30">
        <Page :total="total" v-if="total>condition.limit" :current="condition.start" show-elevator
              @on-change="changepage"></Page>
      </div>
      <Modal footer-hide v-model="isShow" :title="isAdd?'新增IMEI':'编辑IMEI'" width="500">
        <imeiEditor :isAdd="isAdd" v-if="isShow" @success="success"></imeiEditor>
      </Modal>
      <Modal
          v-model="isShow2"
          title="删除"
          @on-ok="getDel('',2)"
          @on-cancel="cancel" width="350">
        <div class="input-item">
          该IMEI将被删除, 是否继续?
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
  import imeiEditor from '../../components/imeiImport/imeiEditor';
  import { imeiImportList, imeiImportDel } from '@/api/imeiImport';
  import base from '@/mixins/base';
  import { mapState } from 'vuex';

  export default {
    mixins: [base],
    components: { imeiEditor },
    computed: {
      ...mapState('admin/user', [
        'info',
      ]),
    },
    data () {
      return {
        loading: false,
        total: 0,//总条数
        roleId: '',
        editorData: {},
        title: '编辑',
        statusList: [],
        condition: {//头部筛选传参
          keyword: '',
          limit: 10,
          start: 1,
          is_enable: '',
        },
        columns2: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '序号',
            slot: 'index',
          },
          {
            title: '设备编码',
            key: 'code',
          },
          {
            title: '设备SIM卡',
            slot: 'imsi',
          },
          {
            title: '创建时间',
            key: 'created_at',
          },
          {
            title: '状态',
            slot: 'status',
          },
          {
            title: '更新时间',
            key: 'updated_at',
          },
          {
            title: '操作',
            slot: 'action',
            width: 120,
            align: 'center'
          }
        ],
        data1: [],
        isShow: false,
        isShow2: false,
        isShow3: false,
        isShow4: false,
        detail: '',
        ids: '',
        isAdd: true,
        noShow: false,
        userId: '',
        isShowUser: false,
        selectlist: [],
        orgList: [],

      }
    },
    created () {
      this.getData();
    },
    filters: {
      format (value) {//这里不能用类似与formatDepts 驼峰命名 不然模版中使用会编译报错

      },
    },
    methods: {
      selectList (value) {
        this.condition.start = 1;
        this.selectlist = value
      },
      delAll () {
        let arr = this.selectlist.map(item => {
          return item.id
        })
        if (arr.length == 0) {
          this.$Message.warning('请先选择IMEI！')
          return
        }
        this.getDel({ id: arr.join() }, 1)
      },
      success () {
        this.getData();
        this.isShow = false;
        this.isShow03 = false;
      },
      //获取列表
      async getData () {
        this.loading = true;
        let res = await imeiImportList({ ...this.condition });
        this.loading = false;
        this.data1 = _.get(res, 'data.records') || [];
        this.total = _.get(res, 'data.total') || 0;
      },
      //分页projectType
      changepage (page) {
        this.condition.start = page
        this.getData()
      },
      getEdit (row, type) {
        this.isAdd = type;
        this.isShow = true;
        if (type) return;
        let { address, bz, name, id, orgId, regdate } = row;
        let regionCode = [];
        if (row.province) regionCode.push(row.province);
        if (row.city) regionCode.push(row.city);
        if (row.district) regionCode.push(row.district);
        this.editorData = { address, bz, name, id, orgId, regdate, regionCode }
      },
      async getDel (row, type) {
        if (type == 1) {
          this.ids = row.id
          this.isShow2 = true;
        } else {
          let res = await imeiImportDel({ storeIds: this.ids });
          if (_.get(res, 'code') == 0) {
            this.isShow2 = false;
            this.$Message.success('删除成功')
            this.getData();
          } else {
            this.$Message.error(_.get(res, 'message') || '删除失败！')
          }
        }
      },

      cancel () {
      },
    }
  }
</script>

<style scoped lang="less">

</style>
